<template>
	<view>
		<cu-custom :title="title"></cu-custom>

		<view class="flex bg-white padding" v-for="(kcitem,index) in KcList"  :key="index">
			<view class="flex align-start flex-sub" >
				<u-avatar size="120rpx" src="https://cdn.uviewui.com/uview/album/1.jpg"></u-avatar>
				<view class="flex-sub margin-left-sm">
					<view class="text-lg text-bold">{{kcitem.Teachname}}</view>
					<view class="margin-top-xs text-gray">
						{{kcitem.Xqteacher}} | 从业{{kcitem.EmpDate}}年
					</view>
					<view class="flex flex-wrap margin-top-xs">
						<u-tag :text="kcitem.Xingqu" type="error" class="margin-right-xs margin-top-xs" plain plainFill
							borderColor="#fff"></u-tag>
							
						<u-tag :text="kcitem.MainCourse" type="error" class="margin-right-xs margin-top-xs" plain plainFill
							borderColor="#fff"></u-tag>
					</view>
					<view class="margin-top" style="width: 140rpx;">
						<u-button color="#ea3457" type="primary" shape="circle" text="关注"
							:customStyle="{width:'140rpx', height: '66rpx'}">
						</u-button>
					</view>
				</view>
			</view>
			<view class="margin-left text-sm" style="flex: 0 0 280rpx">
				<view class="flex flex-between">
					<text>整体满意度：</text>
					<text>{{kcitem.StarsNumber}} {{kcitem.StarsInfo}}</text>
				</view>
				<view class="">
					<u-rate :value="kcitem.StarsNumber" size="32rpx" readonly inactiveColor="#fccfd9" activeColor="#ea3457"></u-rate>
				</view>

				<view class="flex flex-between ">
					<text>尽职度：</text>
					<text>{{kcitem.ResibleStars}} {{kcitem.Resible}}</text>
				</view>
				<view class="">
					<u-rate :value="kcitem.ResibleStars" size="32rpx" readonly inactiveColor="#fccfd9" activeColor="#ea3457"></u-rate>
				</view>

				<view class="flex flex-between ">
					<text>专业度：</text>
					<text>{{kcitem.ProfesStars}} {{kcitem.Profess}}</text>
				</view>
				<view class="">
					<u-rate :value="kcitem.ProfesStars" size="32rpx" readonly inactiveColor="#fccfd9" activeColor="#ea3457"></u-rate>
				</view>

				<view class="flex flex-between ">
					<text>沟通度：</text>
					<text>{{kcitem.MunicatStars}} {{kcitem.Munication}}</text>
				</view>
				<view class="">
					<u-rate :value="kcitem.MunicatStars" size="32rpx" readonly inactiveColor="#fccfd9" activeColor="#ea3457"></u-rate>
				</view>

				<view class="flex flex-between ">
					<text>超出预期度：</text>
					<text>{{kcitem.DisappStars}} {{kcitem.Disapp}}</text>
				</view>
				<view class="">
					<u-rate :value="kcitem.DisappStars" size="32rpx" readonly inactiveColor="#fccfd9" activeColor="#ea3457"></u-rate>
				</view>
			</view>
		</view>

		<!-- 老师标签 -->
		<view class="margin-top bg-white padding" v-for="(kcitems,index) in kcLists"  :key="index">
			<view class="flex justify-center text-bold">
				<view class="padding-lr solid-right">
					平分 {{kcitems.Score}}
				</view>
				<view class="padding-lr">
					教龄 {{kcitems.EduDate}}年
				</view>
			</view>
			<view class="flex justify-center text-bold margin-top">
				<view class="padding-lr solid-right">
					性别：{{kcitems.Gender}}
				</view>
				<view class="padding-lr solid-right">
					{{kcitems.MainCourse}}
				</view>
				<view class="padding-lr">
					{{kcitems.Regional}}
				</view>
			</view>
			
			<view class="flex justify-center margin-top">
				<view style="width: 420rpx;">
					<u-divider text="老师标签" textSize="32rpx" textColor="#333"></u-divider>
				</view>
			</view>

			<view class="text-center text-gray">
				{{kcitems.PersonLabel}}
			</view>
			<view class="text-center text-gray">
				{{kcitems.PersonLabel1}}
			</view>
			<view class="text-center text-gray">
				{{kcitems.PersonLabel2}}
			</view>
			<view class="text-center text-gray">
				{{kcitems.PersonLabel3}}
			</view>
			<view class="text-center text-gray">
				{{kcitems.PersonLabel4}}
			</view>
		</view>

		<!-- 课程表 -->
		<view class="margin-top bg-white padding padding-top-xs">
			
			<view class="flex justify-center">
				<view style="width: 420rpx;">
					<u-divider text="课程表" textSize="32rpx" textColor="#333"></u-divider>
				</view>
			</view>
			
		<view class="margin-top bg-white padding padding-top-xs" v-for="(AcquireList,index) in PublicAcquireList" :key="index">
			<text class="flex-sub">{{AcquireList.Niany}}</text>

			<view class="flex text-center bg-kctitle padding-tb-sm">
				<text class="flex-sub">周一</text>
				<text class="flex-sub">周二</text>
				<text class="flex-sub">周三</text>
				<text class="flex-sub">周四</text>
				<text class="flex-sub">周五</text>
				<text class="flex-sub">周六</text>
				<text class="flex-sub">周日</text>
			</view>
			<view class="flex align-center text-center padding-tb-sm text-gray" >
			
			 <view class="flex-sub">{{AcquireList.Monday}}</view>
			  <view class="flex-sub">{{AcquireList.Tuesday}}</view>
			   <view class="flex-sub">{{AcquireList.Wednesday}}</view>
			    <view class="flex-sub">{{AcquireList.Thursday}}</view>
			  <view class="flex-sub">{{AcquireList.Friday}}</view>
			   <view class="flex-sub">{{AcquireList.Saturday}}</view>
			    <view class="flex-sub">{{AcquireList.Sunday}}</view>
				
			</view>
		</view>
			<view class="flex justify-center margin-top-lg padding-lr-xl margin-lr">
				<u-button color="#ea3457" plain type="primary" size="large" shape="circle" text="全部课表">
				</u-button>
				<u-button @click="routerGo()" class="margin-left" plain color="#ea3457" type="primary" size="large" shape="circle"
					text="预约上课">
				</u-button>
			</view>
		</view>

		<!-- 师生圈 --><view style="width: 420rpx;">
					<u-divider text="师生圈" textSize="32rpx" textColor="#333"></u-divider>
				</view>
		<view class="margin-top bg-white padding padding-top-xs" v-for="(TeacherDylist,index) in TeacherDyLists" :key="index">
			<view class="flex justify-center">
				
			</view>

			<view class="text-center text-gray">
				<view class="text-center text-gray">
					{{TeacherDylist.Content}}
				</view>
			</view>

			
		</view>
<view class="flex justify-center margin-top-lg">
				<view style="width: 330rpx;">
					<u-button class="margin-left" plain color="#ea3457" type="primary" size="large" shape="circle"
						text="查看全部(0)">
					</u-button>
				</view>
			</view>
		<view class="margin-top bg-white padding-lr padding-tb-xs">
			<u-tabs @click="curriculumTypeTab" :list="curriculumTypeList" lineWidth="20" lineHeight="7"
				:lineColor="`url(/static/images/ico/active-bg.png) 100% 100%`" :activeStyle="{
			        color: '#ea3457',
			        fontWeight: 'bold',
			        transform: 'scale(1.05)'
			    }" :inactiveStyle="{
			        color: '#333',
			        transform: 'scale(1)'
			    }" itemStyle="padding-right: 30rpx; height: 100rpx;">
			</u-tabs>
		</view>

		<!-- 1对1辅导 -->
		<view v-if="curriculumIndex == 0" class="margin-top bg-white padding padding-top-xs">
			<view class="flex justify-center">
				<view style="width: 420rpx;">
					<u-divider text="1对1辅导" textSize="32rpx" textColor="#333"></u-divider>
				</view>
			</view>

			<view class="flex text-center padding-tb-sm">
				<text class="flex-sub">辅导时长</text>
				<text class="flex-sub">学生人数</text>
				<text class="flex-sub">试听课</text>
				<text class="flex-sub">投诉次数</text>
			</view>
			<view class="flex align-center text-center padding-tb-sm text-bold">
				<view class="flex-sub">0分钟</view>
				<view class="flex-sub">1位</view>
				<view class="flex-sub">0节</view>
				<view class="flex-sub">0分钟</view>
			</view>

			<view class="flex justify-center margin-top-lg">
				<view style="width: 330rpx;">
					<u-button @click="$routerGo('/pages/index/make')" class="margin-left" plain color="#ea3457" type="primary" size="large" shape="circle"
						text="预约上课">
					</u-button>
				</view>
			</view>
		</view>

		<!-- 老师介绍 -->
		<view v-if="curriculumIndex == 1" class="margin-top bg-white padding padding-top-xs">
			<view class="flex justify-center">
				<view style="width: 420rpx;">
					<u-divider text="老师介绍" textSize="32rpx" textColor="#333"></u-divider>
				</view>
			</view>

			<view class="text-lg">
				自我介绍
			</view>
			<view class="text-gray margin-top-sm">
				因为在职,也因为是高级教师。目前开学了,现在风声有点紧,不方便呈现自己,请原谅。如果需要辅导,可以联系我,谢谢!
			</view>

			<view class="text-center margin-top text-lg">
				毕业学校：广西大学
			</view>

			<view class="text-lg margin-top">
				照片展示
			</view>
			<view class="text-gray margin-top-sm">
				该老师暂无上传照片
			</view>

			<view class="text-lg margin-top">
				视频展示
			</view>
			<view class="text-gray margin-top-sm">
				该老师暂无上传视频
			</view>

			<view class="text-lg margin-top">
				成功案列（5）
			</view>
			<view class="text-lg margin-top">
				成功案列一：
			</view>
			<view class="text-lg margin-top-sm">
				心理辅导让他自信
			</view>
			<view class="text-gray margin-top-sm">
				本人是多年的学校兼职心理老师,对多名学生进行过辅导,帮助他们建立自信,走出一时的困惑,焦虑以及失距
			</view>

			<view class="text-lg margin-top">
				成功案列二：
			</view>
			<view class="text-lg margin-top-sm">
				心理辅导让他自信
			</view>
			<view class="text-gray margin-top-sm">
				本人是多年的学校兼职心理老师,对多名学生进行过辅导,帮助他们建立自信,走出一时的困惑,焦虑以及失距
			</view>

			<view class="flex justify-center margin-top-lg">
				<view style="width: 330rpx;">
					<u-button class="margin-left" plain color="#ea3457" type="primary" size="large" shape="circle"
						text="查看全部">
					</u-button>
				</view>
			</view>
		</view>

		<!-- 在售公开课 -->
		<view v-if="curriculumIndex == 2" class="margin-top bg-white padding padding-top-xs">
			<view class="flex justify-center">
				<view style="width: 420rpx;">
					<u-divider text="在售公开课" textSize="32rpx" textColor="#333"></u-divider>
				</view>
			</view>

			<view class="flex flex-between margin-top-sm" v-for="(item,index) in 2">
				<view class="text-center" style="flex: 0 0 160rpx">
					<view class="text-red text-bold">
						￥209
					</view>
					<view class="text-sm text-gray">
						门市价:￥999
					</view>
				</view>
				<view class="margin-left-sm" style="flex: 0 0 320rpx">
					<view class="text-black text-lg text-cut" style="width: 320rpx;">
						成人/少儿钢琴1对1体验课
					</view>
					<view class="text-gray text-sm">
						年售卖20
					</view>
				</view>
				<view class="">
					<u-button class="margin-left" plain color="#ea3457" type="primary" shape="circle" text="预约上课"
						:customStyle="{width:'160rpx', height: '70rpx'}">
					</u-button>
				</view>
			</view>

		</view>


		<!-- 学生评价 -->
		<view v-if="curriculumIndex == 3" class="margin-top bg-white padding padding-top-xs">
			<view class="flex justify-center">
				<view style="width: 420rpx;">
					<u-divider text="学生评价" textSize="32rpx" textColor="#333"></u-divider>
				</view>
			</view>

			<view class="flex align-start margin-top" v-for="(item,index) in 4">
				<u-avatar size="120rpx" :src="`https://cdn.uviewui.com/uview/album/${index + 1}.jpg`"></u-avatar>
				<view class="margin-left-sm flex-sub">
					<view class="flex flex-between">
						<view class="">
							<view class="text-lg">
								王武
							</view>
							<view class="text-gray">
								13小时前
							</view>
						</view>
						<view class="text-right">
							<u-rate :value="4.7" size="32rpx" readonly inactiveColor="#fccfd9" activeColor="#ea3457">
							</u-rate>
							<view class="text-lg">
								1对1试听课
							</view>
						</view>
					</view>

					<view class="text-lg margin-top-sm">
						非常好，很喜欢！
					</view>

					<view class="text-gray margin-top-sm">
						来自：【浙江高一英语】翻译
					</view>
				</view>
			</view>

			<view class="flex justify-center margin-top-lg">
				<view style="width: 330rpx;">
					<u-button class="margin-left" plain color="#ea3457" type="primary" size="large" shape="circle"
						text="查看全部（18）">
					</u-button>
				</view>
			</view>
		</view>

		<u-gap height="160rpx" bgColor="#f4f4f4"></u-gap>

		<view class="flex flex-between btn-bottom padding-lr padding-tb-sm bg-white">
			<view class="text-center" style="flex: 0 0 140rpx;">
				<view class="flex justify-center">
					<u-icon name="heart-fill" color="#cccccc" size="60rpx"></u-icon>
				</view>
				<view class="">
					关注
				</view>
			</view>
			<view class="text-center" style="flex: 0 0 140rpx;">
				<view class="flex justify-center">
					<u-icon name="rmb-circle-fill" color="#cccccc" size="60rpx"></u-icon>
				</view>
				<view class="">
					充值
				</view>
			</view>

			<view class="flex flex-sub">
				<u-button class="margin-left" color="#ea3457" type="primary" size="large" shape="circle" text="发消息">
				</u-button>
			</view>
		</view>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:'',
				user_type:'',
				courid:'',
				tokenid:'',
				pagetokenid:'',
				pageuser_type:'',
				KcList:[],
				kcLists:[],
				TeacherDyLists:[],
				PublicAcquireList:[],
				// GetPublicAcquireInfo
				//课程分类列表
				curriculumIndex: 0,
				curriculumTypeList: [{
					name: '1对1辅导'
				}, {
					name: '老师简介',
				}, {
					name: '在售班课',
				}, {
					name: '学生评价'
				}],
				
			}
		},
		onLoad(e) {
			console.log(e);
			this.courid=e.courid;
			this.title=e.pageuser_type+'主页';
			this.tokenid=e.usertoken_id;
			this.user_type=e.user_type;
			this.pagetokenid=e.pagetoken_id;
			this.pageuser_type=e.pageuser_type;
			
			console.log(this.courid+';'+this.title+';'+this.tokenid+';'+e.user_type)
			
			//获取教师信息列表
			let urlkc='/GetPlannerListInfo/'
			let params={
				Tockenid:e.pagetoken_id,
				Usertype:e.pageuser_type,
			}
			
			//获取教师评论朋友圈
			let urltdylist='/GetDynamicInfo/'
			let Dyparams={
				Terid:e.pagetoken_id,
			}
			
			//获取本周日期
			let Acquirelkc='/GetPublicAcquireInfo/'
			
			this.$H.post(urlkc,params).then(res =>{
					console.log(res.code);
					if(res.code==200)
					{
						this.KcList = res.data,
						this.kcLists = res.data
					}
				})
					
			this.$H.post(urltdylist,Dyparams).then(Res =>{
					console.log(Res.code);
					if(Res.code==200)
					{
						this.TeacherDyLists = Res.data
					}
				})
			
			this.$H.post(Acquirelkc).then(res =>{
				
				if(res.code==200)
				{
					this.PublicAcquireList = res.Data;
				}					
			})
						
		},
		onShow() {

		},
		methods: {
			//切换Tab
			curriculumTypeTab(item){
				console.log(item);
				this.curriculumIndex = item.index
			},
			
			//路由跳转
			routerGo(){
				this.$routerGo(`/pages/index/make?courid=${this.courid}&&usertoken_id=${this.tokenid}&&user_type=${this.user_type}&&pagetoken_id=${this.pagetokenid}&&pageuser_type=${this.pageuser_type}`)
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.bg-kctitle {
		background-color: #e8f0ff;
	}

	.kc-active {
		position: relative;
		color: #fff;
		z-index: 1;

		&::before {
			position: absolute;
			width: 50rpx;
			height: 50rpx;
			background-color: #ea3457;
			left: 0;
			top: 0;
			content: '';
			border-radius: 50%;
			left: 50%;
			top: 50%;
			margin-left: -25rpx;
			margin-top: -25rpx;
			z-index: -1;
		}
	}
</style>
